<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <th:block th:include="include :: header('新增产品')" />
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-pro-add">
                <div class="form-group" hidden>
                    <label class="col-sm-3 control-label ">产品编号：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="pid" id="pid">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品名称：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="pname" id="pname" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品类型：</label>
                    <div class="col-sm-8">
                        <select name="productClass.classId" th:with="proClass=${@proProp.getProductClass()}">
                            <option value="">---请选择产品类型---</option>
                            <option th:each="c : ${proClass}" th:text="${c.className}" th:value="${c.classId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品系列：</label>
                    <div class="col-sm-8">
                        <select name="productSeries.seriesId" th:with="proSeries=${@proProp.getProductSeries()}">
                            <option value="">---请选择产品系列---</option>
                            <option th:each="ps : ${proSeries}" th:text="${ps.seriesName}" th:value="${ps.seriesId}" ></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品风格：</label>
                    <div class="col-sm-8">
                        <select name="productStyle.styleId" th:with="proStyle=${@proProp.getProductStyle()}">
                            <option value="">---请选择产品风格---</option>
                            <option th:each="ps : ${proStyle}" th:text="${ps.styleName}" th:value="${ps.styleId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品规格：</label>
                    <div class="col-sm-8">
                        <select name="productSpec.specId" th:with="proSpec=${@proProp.getProductSpec()}">
                            <option value="">---请选择产品规格---</option>
                            <option th:each="ps : ${proSpec}" th:text="${ps.specName}" th:value="${ps.specId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品材质：</label>
                    <div class="col-sm-8">
                        <select name="productMaterial.materialId" th:with="proMaterial=${@proProp.getProductMaterial()}">
                            <option value="">---请选择产品材质---</option>
                            <option th:each="m : ${proMaterial}" th:text="${m.materialName}" th:value="${m.materialId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品产地：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="location" id="location" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产品价格：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="price" id="price" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">进口在途：</label>
                    <div class="col-sm-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('sys_yes_no')}">
                            <input type="radio" th:id="${dict.dictCode}" name="imp" th:value="${dict.dictValue}" th:checked="${dict.default}">
                            <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">产品备注：</label>
                    <div class="col-sm-8">
                        <textarea id="pdesc" name="pdesc" class="form-control"></textarea>
                    </div>
                </div>
<!--                <div class="btn-group-sm" id="toolbar" role="group">-->
<!--                    <a class="btn btn-success" onclick="choosePic()" >-->
<!--                        <i class="fa fa-plus"></i>选择展示图片-->
<!--                    </a>-->
<!--                </div>-->
<!--                <div class="form-group">-->
<!--                    <label class="col-sm-3 control-label">展示图片：</label>-->
<!--                    <div class="col-sm-8">-->
<!--                        <img src="/product/productA.jpg">-->
<!--                    </div>-->
<!--                </div>-->
            </form>
        </div>
        <th:block th:include="include :: footer" />
        <script type="text/javascript">
            var prefix = ctx + "product/menu";

            $("#form-pro-add").validate({
                onkeyup: false,
                rules:{
                    pname:{
                        remote: {
                            url: ctx + "product/menu/checkPnameUnique",
                            type: "post",
                            dataType: "json",
                            data: {
                                "pname" : function() {
                                    return $.common.trim($("#pname").val());
                                }
                            },
                            dataFilter: function(data, type) {
                                return $.validate.unique(data);
                            }
                        }
                    },
                },
                messages: {
                    "pname": {
                        remote: "产品名称已经存在"
                    },
                },
                focusCleanup: true
            });

            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(prefix + "/add", $('#form-pro-add').serialize());
                }
            }
        </script>
    </body>
</html>
